<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>邀请分享</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css"/>
    <!--<link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.css"/>-->
    <script src="./js/jquery.js"></script>
    <script src="lib/layer/layer.js"></script>
    <!--<script src="lib/sweet-alert.min.js"></script>-->
    <!--<link rel="stylesheet" type="text/css" href="lib/sweet-alert.css">-->
    <script src="lib/bootstrap/js/bootstrap.js"></script>
    <script src="js/base.js"></script>
    <script src="lib/vue/vue.min.js"></script>
    <script src="lib/vue/vue-resource.min.js"></script>
    <script src="./js/clipboard.min.js"></script>
    <link rel="stylesheet" href="./css/iconfont1.css"/>
</head>
<script type="text/javascript">
    (function () {
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 640) deviceWidth = 640;
        document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
    }());
</script>
<body>
<div class="perCenter" id="app">
    <div class="per_left">
        <p><span class="bottom_color">首页</span> > <span>个人中心</span></p>
        <div class="data">
            <div class="photo">
                <img :src="info.real_avatar" alt=""/>
                <p>{{info.name}}</p>
            </div>
            <ul class="name">
                <a href="./task_center.html"><li  ><i class="icon iconfont icon-zhengjianhao-copy"></i>任务中心</li></a>
                <a href="./myVirtual.html"><li ><i class="icon iconfont icon-zhuji2"></i>我的虚拟机</li></a>
                <a href="./personalData.html"><li ><i class="icon iconfont icon-gerenziliao"></i>个人资料</li></a>
                <a href="./invitedShare.html"><li class="person"> <i class="icon iconfont">&#xe690;</i>邀请分享</li></a>
                <a href="./password.html"><li > <i class="icon iconfont icon-xiugaimima"></i>修改密码</li></a>
            </ul>
        </div>
    </div>
    <div class="task" style="margin-top: 50px;">
        <p class="perTitle" style="border: none;"><i></i><span>邀请分享</span></p>
        <div class="copyContent" id="copyContent"></div>
        <p class="copyT">复制上面内容发送给好友，好友成功注册后即可获得U币</p>
        <div class="Btn" style="text-align: right"><button class="btn" data-clipboard-action="copy" data-clipboard-target="#copyContent">复制</button></div>
        <div class="bdsharebuttonbox">
            <a href="#" class="bds_more" data-cmd="more"></a>
            <a href="#" class="bds_qzone" data-cmd="qzone" title="分享到QQ空间"></a>
            <a href="#" class="bds_tsina" data-cmd="tsina" title="分享到新浪微博"></a>
            <a href="#" class="bds_tqq" data-cmd="tqq" title="分享到腾讯微博"></a>
            <a href="#" class="bds_weixin" data-cmd="weixin" title="分享到微信"></a>
            <a href="#" class="bds_sqq" data-cmd="sqq" title="分享到QQ好友"></a>
        </div>
    </div>
</div>
<div class="footer"></div>
</body>
<script>
    (function () {
        var app = new Vue({
            el: '#app',
            data: function () {
                return{
                    aurl: [],
                    info:''
                }
            },
            mounted: function () {
                this.showData();
//需要执行的方法可以在mounted中进行触发，其获取的数据可以赋到data中后，可以放在前面进行渲染
            },
            methods: {
                showData: function () {
                    var _this = this;
                    get(url + 'user/info', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.info = res.body.data;
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                    get(url + 'task/inviteContent/invite', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    $('#copyContent').html(res.body.data.content);
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                    get(url + 'task/shareUrl/share', {}).then(
                            function (res) {
                                console.log(res);
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.aurl = res.body.data.url;
                                    _this.setup();
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                setup:function(){
                    window._bd_share_config = {
                        "common": {
                            "bdSnsKey": {},
                            "bdText": "",
                            "bdMini": "2",
                            "bdMiniList": false,
                            "bdPic": "",
                            "bdStyle": "0",
                            "bdSize": "32",
                            "bdUrl":this.aurl
                        },
                        "share": {},
                        image : [{
                            tag:'baidu',
                            viewType : 'list',
                            viewPos : 'top',
                            viewColor : 'black',
                            viewSize : '32',
                            viewList : ['qzone','tsina','huaban','tqq','renren']
                        }]
                    };
                    with(document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~ ( - new Date() / 36e5)];

                }
            }
        })
    })()
    $('.footer').load("./footer.html")
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
//        console.log(e);
        alert('复制成功，快去分享吧')
        $('.popup').css('display','none')
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });

</script>
</html>